<template>
  <div class="experience">
    <Title title="我的经历" :show="show"></Title>
    <div class="content">
      <div class="undergo" v-for="(experience, index) in experiences" :key="index">
        <div class="date-box">
          <p>{{ experience.date.dateStart }}</p>
          <p>-</p>
          <p>{{ experience.date.dateEnd }}</p>
        </div>
        <div class="container">
          <p class="name">{{ experience.container.name }}</p>
          <p class="major">{{ experience.container.major }}</p>
          <p class="info">{{ experience.container.info }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from '../title/title'

import { mapState } from 'vuex'

export default {
  name: 'experience',
  data () {
    return {
      show: false
    }
  },
  computed: {
    ...mapState(['experiences'])
  },
  components: {
    Title
  }
}
</script>

<style lang="less" scoped>
.experience {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 50px 0 30px;
  .content {
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
    transition: all 1s;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      z-index: 0;
      transform: translateX(-50%);
      width: 2px;
      background-color: #090909;
    }
    .undergo {
      margin-top: 80px;
      position: relative;
      &:first-child {
        margin-top: 0;
      }
      &:nth-child(odd) {
        .container {
          text-align: right;
          float: left;
        }
      }
      &:nth-child(even) {
        .container {
          text-align: left;
          float: right;
        }
      }
      &::before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        clear: both;
      }
      &::after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
      }
      .date-box {
        width: 9.375rem;
        height: 9.375rem;
        border-radius: 50%;
        background-color: #fff;
        padding-top: 1.875rem;
        border: 1px solid #eee;
        position: absolute;
        left: 50%;
        top: 0;
        z-index: 1;
        margin-left: -75px;
        text-align: center;
        box-sizing: border-box;
        p {
          line-height: 30px;
          font-weight: 600;
          font-size: 16px;
          color: #787978;
        }
      }
      .container {
        height: 9.375rem;
        width: 40%;
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .name {
          font-weight: 700;
          font-size: 16px;
          color: #626e7c;
        }
        .major {
          margin: 0.5rem 0;
          font-size: 16px;
          color: #E87E04;
        }
        .info {
          font-size: 14px;
          color: #787978;
        }
      }
    }
  }
}
@media screen and (max-width: 1200px) {
  .content {
    width: 40% !important;
    &::after {
      left: calc(9.375rem / 2  + 20px) !important;
    }
    .undergo {
      .date-box {
        left: 0 !important;
        margin: 0 !important;
      }
      .container {
        // height: auto !important;
        // padding: 10px 0 !important;
        float: left !important;
        text-align: left !important;
        margin: 0 0 0 10rem !important;
      }
    }
  }
}
@media screen and (max-width: 600px) {
  .content {
    width: 100% !important;
    &::after {
      left: calc(9.375rem / 2  + 20px) !important;
    }
    .undergo {
      margin-top: 0px !important;
      .date-box {
        left: 0 !important;
        margin: 0 !important;
      }
      .container {
        height: auto !important;
        padding: 10px 0 !important;
        float: left !important;
        text-align: left !important;
        margin: 9.5rem 0 0 10rem !important;
      }
    }
  }
}
</style>
